<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 需求: 让"a"字高亮, 把一个字符串, 用另一个特殊的字符串来代替
      const str = 'abcdABCDa123A123'
      
      //1.原理： 把'a' 替换成 <span>标签
      const result = str.replace('a', '<span style="color: red;">a</span>')
      document.write(result)
      document.write('<br>')
      
      /* 问题： replace默认只能替换匹配的第一个字符
         解决方案：使用正则
      */
      //2.原理 ： 正则表达式修饰符 g:全局匹配
      let reg1 = new RegExp('a', 'g')
      const result1 = str.replace(reg1, '<span style="color: red;">a</span>')
      document.write(result1)
      document.write('<br>')

      /* 问题：默认正则是区分大小写的，只能替换小写a，不能替换大写A
         解决方案：使用正则修饰符 i:不区分大小写
      */
      let reg2 = new RegExp('a', 'gi')
      const result2 = str.replace(reg2, '<span style="color: red;">a</span>')
      document.write(result2)
      document.write('<br>')

      /* 问题：不区分大小写之后，把所有的a或A,都替换成了小写a
         解决方案：使用正则表达式匹配结果 + replace方法的回调函数解决
            str.replace(正则,函数)   替换结果就是这个函数的返回值
                函数形参match: 就是正则匹配的结果(形参名字不一定是match，可以随便写)
                函数形参return 返回值： 就是replace方法返回值(最终结果)
      */
      let reg3 = new RegExp('a', 'gi')
      const result3 = str.replace(reg3, function(match){
          return `<span style="color: red;">${match}</span>`
      })
      document.write(result3)
      document.write('<br>')
    </script>
  </body>
</html>
